<template>
  <div class="add_mian">
    <div class="add_row">
      <div class="row_mian">
        <div class="row_left">
          <el-steps
            direction="vertical"
            :active="active"
            finish-status="success"
          >
            <el-step
              title="一、展位信息确认"
              :icon="active > 0 ? 'el-icon-check' : ''"
            ></el-step>
            <el-step
              title="二、展位基本信息"
              :icon="active > 1 ? 'el-icon-check' : ''"
            ></el-step>
            <el-step
              title="三、搭建商信息"
              :icon="active > 2 ? 'el-icon-check' : ''"
            ></el-step>
            <el-step
              title="四、审图资料上传"
              :icon="active > 3 ? 'el-icon-check' : ''"
            ></el-step>
            <el-step
              title="报图结束"
              :icon="active > 4 ? 'el-icon-check' : ''"
            ></el-step>
          </el-steps>
        </div>
        <div class="row_right">
          <zwxx
            @deletenext="deletenext"
            @hanldnext="hanldnext"
            v-if="active == 0"
          ></zwxx>
          <keep-alive include="keepAlive.join(',')">

            <zwjbxx @hanldnext="hanldnext" v-if="active == 1"></zwjbxx>
            <djsxx @hanldnext="hanldnext" v-if="active == 2"></djsxx>
            <stsc :appid="appid" @hanldnext="hanldnext"  v-if="active == 3"></stsc>
            <btjs @hanldnext="hanldnext" v-if="active == 4"></btjs>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import zwxx from "../../components/outfit/drawing/add/zwxx.vue";
import djsxx from "../../components/outfit/drawing/add/djsxx.vue";
import zwjbxx from "../../components/outfit/drawing/add/zwjbxx.vue";
import stsc from "../../components/outfit/drawing/add/stsc.vue";
import btjs from "../../components/outfit/drawing/add/btjs.vue";
export default {
  components: {
    djsxx,
    zwxx,
    zwjbxx,
    stsc,
    btjs,
  },
  data() {
    return {
      bool:false,
      active: 3,
      appid:0,
      keepAlive: ["step2", "step3", "step4", "step5"],
    };
  },
  activated() {
    console.log('w1', appid);
    let jdactive = this.$route.query.index;
    this.appid = this.$route.query.applyid
    if (jdactive) {
      this.active = jdactive - 1;
    } else {
      this.active = 3;
    }
  },
  created(){
    console.log('11111');
      this.appid = this.$route.query.applyid
  },
  
  methods: {
    hanldnext(val) {
      this.active = val;
    },
    deletenext(){
      this.keepAlive = []
    }
  },
};
</script>
<style scoped>
.add_mian {
  padding: 40px;
}
.add_row {
  margin: auto;
  width: 70%;
}
/deep/.el-step__icon.is-text {
  display: none !important;
}
/deep/.el-step.is-vertical .el-step__line {
  width: 0;
}
.row_mian {
  display: flex;
}
.row_left {
  flex: 1;
  padding: 20px 0;
  height: 200px;
  background-color: #fff;
}
.row_right {
  flex: 4;
  background-color: #fff;
  margin-left: 20px;
}
</style>